<template>
  <div v-if="showView" className="itemized-energy-consumption-chart-container">
    <div className="itemized-energy-consumption-chart-view" id="monthly-itemized-energy-consumption-id"></div>
  </div>
  <div v-else className="noData">
    <p><img src="../../../assets/nodata.png"></p>
    <p>暂无数据</p>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {ref, onMounted, onBeforeUnmount} from 'vue';
import _ from "underscore";

export default {
  setup() {
    let waterEleRateChart = null;
    let showView=ref(true);
    // 初始化图表
    const initChart = () => {
      const chartDom = document.getElementById('monthly-itemized-energy-consumption-id');
      waterEleRateChart = echarts.init(chartDom);

    };
    const setData = (data) => {
      if (!data) {
        showView.value = false;
        return;
      }
      initChart();
      let zoomShow = false;
      if (data.xAxis.length > 4) {
        zoomShow = true;
      } else {
        zoomShow = false;
      }
      let series = [];
      let color = ["#4e6de0", "#b688dc", "#81c4c7"];
      _.forEach(data.data, function (item, index) {
        series.push({
          name: item.name,
          type: 'bar',
          data: item.data=='-'?0:item.data,
          barWidth: 10,
          barGap: 0.7,//柱间距离
          label: {//图形上的文本标签
            normal: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#ffffff',
                fontStyle: 'normal',
                fontSize: 12,
              },
            },
          },
          itemStyle: {//图形样式
            normal: {
              barBorderRadius: [2, 2, 0, 0],
              color: color[index]
            },
          },
        })
      })
      const option = {
        grid: {
          left: '4%',
          right: '4%',
          bottom: '6%',
          top:'20%',
          padding:'0 0 10 0',
          containLabel: true,
        },
        legend: {//图例组件，颜色和名字
          left:10,
          top:0,
          itemGap: 16,
          itemWidth: 18,
          itemHeight: 10,
          textStyle: {
            color: '#a8aab0',
            fontStyle: 'normal',
            fontSize: 12,
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,//坐标轴两边留白
            data: data.xAxis,
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
              margin:15,
              textStyle: {
                color: '#6c7174',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisTick:{//坐标轴刻度相关设置。
              show: false,
            },
            axisLine:{//坐标轴轴线相关设置
              show:false,
              lineStyle:{
                color:'#fff',
                opacity:0.2
              }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线。
              show: false,
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#a8aab0',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12,
              }
            },
            axisLine:{
              show: false
            },
            axisTick:{
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#fff'],
                opacity:0.06
              }
            }

          }
        ],
        dataZoom: [//滚动条
          {
            show: zoomShow,
            type: "slider",
            realtime: true,
            startValue: 0,
            endValue: 4,
            xAxisIndex: [0],
            bottom: "-3",
            left: "30",
            right: "30",
            height: 10,
            borderColor: "rgba(0,0,0,0)",
            textStyle: false
          }
        ],
        series : series
      };
      waterEleRateChart.setOption(option,true);
    }
    onBeforeUnmount(() => {
      if (waterEleRateChart) {
        waterEleRateChart.dispose();
      }
    });

    return {
      setData,
      showView
    };
  }
};
</script>

<style scoped>
.itemized-energy-consumption-chart-container {
  width: 100%;
  height: 300px;
}

.itemized-energy-consumption-chart-view {
  width: 100%;
  height: 300px;
}
</style>
